div{
    width:200px;
    height:200px;
}

input{
    -webkit-appearance: none;
    width:100px;
    height:100px;
}   

input:checked{
    border-radius: 50%;
}

div > span{
    font-size: 20px;
    line-height: 197px;
    padding: 28px;
}

#red{
    background-color:red;
}

#red:checked ~ div{
    background-color: red;
}

#blue{
    background-color: blue;
}

#blue:checked ~ div{
    background-color: blue;
}

#black{
    background-color: black;
}

#black:checked ~ div{
    background-color: black;
}


#yellow{
    background-color: yellow;
}

#yellow:checked ~ div{
    background-color: yellow;
}

#pink{
    background-color: pink;
}

#pink:checked ~ div{
    background-color: pink;
}






